﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <link href="css/default.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.pager.js"></script>
    <script type="text/javascript">
        var pageSize = 10;
        var pager;
        url = '/get_log_count';
        $(document).ready(function(){
            $.ajax({
                url:url,
                contentType: "application/json; charset=utf-8",
                type:"GET",
                success:function(result){
                    if(result.data>0){
                         pager = $(".pager").pager({
                            pageSize: pageSize,
                            itemCount: result.data,
                            onPageChanged: true,
                            onPageChange: function (pageIndex) {
                                 $("#log_table tr").remove();
                                render_log(pageIndex+1,pageSize);
                            }
                        });
                    }
                    render_log(1,pageSize);
                }
            });
        });

        function render_log(pagegIndex,pageSize){
            $.ajax({
                url:"/get_logs",
                type:"POST",
                data:JSON.stringify({"PageIndex": pagegIndex, "PageSize": pageSize}),
                contentType: "application/json; charset=utf-8",
                success:function(result){

                    if(result.data.length>0){

                        for(var i=0;i<result.data.length;i++){
                            var tr=$("<tr></tr>");
                            var td1=$("<td></td>").text(result.data[i].Id);
                            var td2=$("<td></td>").text(result.data[i].Date);
                            var td3=$("<td></td>").text(result.data[i].Level);
                            var td4=$("<td></td>").text(result.data[i].Logger);
                            var td5=$("<td></td>").text(result.data[i].Message);
                            tr.append(td1);
                            tr.append(td2);
                            tr.append(td3);
                            tr.append(td4);
                            tr.append(td5);


                            $("#log_table").append(tr);
                        }

                    }
                }
            });
        }
    </script>
</head>
<body>
    <table class="log_table" id="log_table">
        <th style="width: 60px;">序号</th>
        <th style="width: 120px">时间</th>
        <th>等级</th>
        <th>logger</th>
        <th>消息</th>
    </table>
    <div class="pager">

    </div>
</body>
</html>
